<template>
  <div>
    <div style="margin: 10px">
      <el-button type="primary">新增</el-button>
      <el-button type="primary">导入</el-button>
      <el-button type="primary">导出</el-button>
    </div>
    <div style="margin: 10px 0">
      <el-input v-model="search" disabled placeholder="请输入关键字" style="width: 40%" />
      <el-button type="primary">搜索</el-button>
    </div>

  <el-table :data="tableData" border style="width: 100%">
    <el-table-column prop="date" label="Date" sortable/>
    <el-table-column prop="name" label="Name" />
    <el-table-column prop="address" label="Address"/>
    <el-table-column fixed="right" label="Operations" width="120">
      <template #default>
        <el-button type="text" @click="handleEdit"
        >编辑</el-button>
        <el-popconfirm title="你确确确确确定好了要删除?">
          <template #reference>
            <el-button type="text">删除</el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>

  </el-table>



    <div class="demo-pagination-block">
      <div class="demonstration"></div>
      <el-pagination
          v-model:currentPage="currentPage"

          :page-sizes="[10, 20, 30, 40]"
          layout="total, sizes, prev, pager, next, jumper"
          :page-size="10"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>

  </div>

</template>

<script>


export default {
  name: 'HomeView',
  components: {

  },
  data() {
    return {
      search: '',
      currentPage:1,
      total: 10,
      tableData:[{
        date: '2022-04-26',
        name: '王佳庆',
        address: '河南省 鹤壁市 淇滨区黎阳路240号镇政府家属院别墅',
      },{
        date: '2022-04-24 ',
        name: '王佳庆',
        address: '河南省 鹤壁市 淇滨区黎阳路240号镇政府家属院别墅',
      },{
        date: '2022-04-25',
        name: '王佳庆',
        address: '河南省 鹤壁市 淇滨区黎阳路240号镇政府家属院别墅',
      },
      ]
    }

  },
  methods: {
    handleEdit() {

    },
    handleSizeChange() {

    },
    handleCurrentChange(){

    }


  }
}
</script>
